<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .da {
            display: flex;
        }

        .hezi1 {
            /* display: flex; */
            width: 1000px;
            /* justify-content: space-around;
            flex-wrap: wrap; */


        }

        .hezi2 {
            flex: 1;
            border: 1px solid black;

        }

        .box {
            float: left;
            width: 200px;
            height: 380px;
            border: 3px solid;
            text-align: center;
            margin-bottom: 10px;
            margin: 2px 22px;

        }

        .box img {
            width: 100%;
        }

        .box p:nth-child(2) {
            margin-top: 10px;
        }

        .box p:nth-child(3) {
            margin-top: 10px;
        }

        .box .btn {
            display: block;
            width: 100px;
            height: 30px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 30px;
            margin: 0 auto;
            margin-top: 10px;
            border: 0;
        }

        .hezi2 .gouwuche {
            font-weight: bold;
            margin: 10px 0;
        }

        .hezi2 .wupin {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }

        .hezi2 .wupin img {
            width: 100px;
            vertical-align: middle;
        }

        .hezi2 .wupin span {
            line-height: 125px;
        }

        .hezi2 .qingkong {
            display: inline-block;
            font-weight: bold;
            margin: 10px 50px;
            cursor: pointer;
        }

        .jia,
        .jian {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="da">
        <div class="hezi1">
        </div>
        <div class="hezi2">
            <span class="gouwuche">购物车（0）</span>
            <span class="qingkong">清空购物车</span>
            <div class="che">
                <!-- <div class="wupin">
                    <input type="checkbox">
                    <div><img src="img/1.png" alt="">
                    <p>高级办公椅</p></div>
                    <span>10</span>
                    <span>1</span>
                    <span>删除收藏</span>
                </div>
                 -->
            </div>
            <div class="zongjia">总价：元</div>
        </div>
    </div>
</body>

</html>
<script>
    class Gouwu {
        constructor(el, data) {
            this.data = data
            this.dom = document.querySelector(el)
            // console.log(this.data,this.dom);
            this.oo = { list: [] }
            this.xaunran()
            this.shijian()

        }
        // 渲染左边商品
        xaunran() {
            var str = this.data.map((item) => {
                return `
            <div class="box">
            <img src="${item.tupian}" alt="">
            <p>${item.mingcheng}</p>
            <p>${item.jiage}</p>
            <button class="btn">加入购物车</button>
            </div>
               `
            }).join('')
            this.dom.querySelector('.hezi1').innerHTML = str

        }
        shijian() {
            // 点击加入购物车给新数组oo加数据
            let list = this.dom.querySelector('.hezi1');
            list.onclick = (e) => {
                if (e.target.tagName == 'BUTTON') {
                    var btns = [...document.querySelectorAll('button')]
                    var index = btns.findIndex((item) => {
                        return item == e.target;
                    })
                    this.oo.list.push(this.data[index])
                    this.oo.list = [...new Set(this.oo.list)]
                }
                this.xaunran2()
            }
            // 清空购物车
            let anniu = this.dom.querySelector('.hezi2 .qingkong')
            anniu.onclick = (e) => {
                e.stopPropagation()
                this.oo.list.length = 0
                this.xaunran2()
            }
            // 购物车内的事件
            let list2 = this.dom.querySelector('.hezi2')
            list2.onclick = (e) => {
                // 点击+号事件
                if (e.target.className == "jia") {
                    var jia1 = [...document.querySelectorAll('.jia')]
                    var index1 = jia1.findIndex((item) => {
                        return item == e.target;
                    })
                    let jia = this.oo.list[index1].cont++
                }
                // 点击-号事件
                if (e.target.className == "jian") {
                    var jian1 = [...document.querySelectorAll('.jian')]
                    var index2 = jian1.findIndex((item) => {
                        return item == e.target;
                    })
                    if (this.oo.list[index2].cont > 1) {
                        let jian = this.oo.list[index2].cont--
                    }
                }
                // 点击删除数据事件
                if (e.target.className == "shan") {
                    var shan1 = [...document.querySelectorAll('.shan')]
                    var index3 = shan1.findIndex((item) => {
                        return item == e.target;
                    })
                    delete this.oo.list[index3]
                }
                this.xaunran2()
            }
        }


        xaunran2() {
            let str2 = this.oo.list.map((item) => {
                return `<div class="wupin">
                    <input type="checkbox">
                    <div><img src="${item.tupian}" alt="">
                    <p>${item.mingcheng}</p></div>
                    <span>${item.jiage}</span>
                    <span class="jian">-</span>
                    <span>${item.cont}</span>
                    <span class="jia">+</span>
                    <span class="shan">删除收藏<span>
                    </div>`
            }).join('')
            this.dom.querySelector('.hezi2 .che').innerHTML = str2
            var cont = 0;
            this.oo.list.forEach((item) => {
                cont += item.cont
            })
            this.dom.querySelector('.hezi2 .gouwuche').innerHTML = `购物车（${cont}）`
            var price = this.oo.list.reduce((t, item) => {
                return t + item.jiage * item.cont;
            }, 0)
            this.dom.querySelector('.hezi2 .zongjia').innerHTML = `总价：${price}元`
        }
    }
    var arr = [
        { tupian: 'img/1.png', mingcheng: '高级办公椅', jiage: 10000, cont: 1 },
        { tupian: 'img/2.png', mingcheng: '高级按摩椅', jiage: 1000, cont: 1 },
        { tupian: 'img/3.png', mingcheng: '高级电动按摩椅', jiage: 100, cont: 1 },
        { tupian: 'img/4.png', mingcheng: '电动按摩椅', jiage: 10, cont: 1 },
        { tupian: 'img/5.png', mingcheng: '老板椅', jiage: 20000, cont: 1 },
        { tupian: 'img/6.png', mingcheng: '办公桌', jiage: 50000, cont: 1 },
        { tupian: 'img/7.png', mingcheng: '可升降办公椅', jiage: 2000, cont: 1 },
        { tupian: 'img/8.png', mingcheng: '可升降办公桌', jiage: 5000, cont: 1 },
    ]
    var g = new Gouwu('.da', arr)
</script>